﻿@{
    ViewBag.Title = "TabStrip : Hide/Show Tabs";
}

<h2>TabStrip : Hide/Show Tabs</h2>


<h3>Sample</h3>

<button onclick="idxButton_click(0, this);">Hide Tab 1 By Index</button>
<span style="width:10px;">&nbsp;</span>
<button onclick="textButton_click('Tab 2', this);">Hide Tab 2 By Text</button>
<br /><br />

@{
    Html.Telerik().TabStrip()
        .Name("SampleTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Selected(true)
                .Content(
                    @<text>
                    <p>Content for the first tab.</p>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 2")
                .Content(
                    @<text>
                    <p>Content for the second tab.</p>
                    </text>
                );
        })
        .Render();
}

<br />

<script type="text/javascript">
    idxButton_click = function(idx, button) {
        var showTab = $(button).text().indexOf('Show') != -1;

        if (showTab) {
            $(button).text($(button).text().replace('Show', 'Hide'));
            $('#SampleTabStrip').data('tTabStrip').showTab({ index: idx });
        }
        else {
            $(button).text($(button).text().replace('Hide', 'Show'));
            $('#SampleTabStrip').data('tTabStrip').hideTab({ index: idx });
        }
    }
    textButton_click = function(text, button) {
        var showTab = $(button).text().indexOf('Show') != -1;

        if (showTab) {
            $(button).text($(button).text().replace('Show', 'Hide'));
            $('#SampleTabStrip').data('tTabStrip').showTab({ text: text });
        }
        else {
            $(button).text($(button).text().replace('Hide', 'Show'));
            $('#SampleTabStrip').data('tTabStrip').hideTab({ text: text });
        }
    }
</script>
